import { FireOutlined } from "@ant-design/icons";
import {
  Card,
  Col,
  Image,
  message,
  Modal, Row,
  Space
} from "antd";
import Search from "antd/lib/input/Search";
import Text from "antd/lib/typography/Text";
import React from "react";
import imgNo2 from "./img/刺激-插画.png";
import imgNo0 from "./img/午后-插画.png";
import imgNo1 from "./img/购物-插画.png";

type Props = {
  visible: boolean;
  loadRouting: (name: string) => void;
  closeModel: () => void;
};

type State = {};

export default class RecommendModel extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { visible: true };
  }

  closeModal = () => {
    this.props.closeModel();
  };

  onOK = this.closeModal;

  onCancel = this.closeModal;

  loadRoutingByName(name: string) {
    this.props.loadRouting(name);
    this.closeModal();
  }

  searchRouting = (name: string) => {
    if (name === "") {
      message.error("计划名不能为空");
    } else {
      this.loadRoutingByName(name);
    }
  };

  modalTitle = (
    <Space>
      <FireOutlined />
      <Text>热门计划</Text>
    </Space>
  );

  render(): React.ReactNode {
    return (
      <Modal
        visible={this.props.visible}
        title={this.modalTitle}
        onOk={this.onOK}
        onCancel={this.onCancel}
        okText="完成"
        cancelText="取消"
        closable={false}
      >
        <Space direction="vertical">
          <Row justify="space-around">
            <Col span={6}>
              <Card
                cover={<Image src={imgNo0} preview={false} />}
                hoverable
                onClick={() => {
                  this.loadRoutingByName("午后时光");
                }}
              >
                <Card.Meta title="午后时光"></Card.Meta>
              </Card>
            </Col>
            <Col span={6}>
              <Card
                cover={<Image src={imgNo2} preview={false} />}
                hoverable
                onClick={() => {
                  this.loadRoutingByName("尖叫不停");
                }}
              >
                <Card.Meta title="尖叫不停"></Card.Meta>
              </Card>
            </Col>
            <Col span={6}>
              <Card
                cover={<Image src={imgNo1} preview={false} />}
                hoverable
                onClick={() => {
                  this.loadRoutingByName("吃喝玩乐");
                }}
              >
                <Card.Meta title="吃喝玩乐"></Card.Meta>
              </Card>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span={20}>
              <Search
                size="large"
                placeholder="输入计划名称……"
                allowClear
                enterButton="查找"
                onSearch={this.searchRouting}
              />
            </Col>
          </Row>
        </Space>
      </Modal>
    );
  }
}
